// 群聊
.groupChatBody {
    display: flex;
    height: 500px;

    aside,
    article {
        width: 50%;
    }

    aside {
        border-right: 1px solid #ccc;

        .friends_box {
            height: 100%;

            .user-list-box {
                overflow: hidden;

                .letter {
                    padding: 10px;
                    color: #999999;
                }

                .friends {
                    height: 60px;
                    display: flex;
                    padding: 0 10px;
                    align-items: center;

                    &:hover {
                        background: #E8E7E7;
                        cursor: pointer;
                    }

                    .checkbox-box {
                        margin-right: 10px;
                    }

                    .friends_img {
                        width: 35px;
                    }

                    .info {
                        flex: 1;
                        padding-left: 10px;

                        .name {
                            width: 240px;
                            display: flex;
                            align-items: center;

                            span {
                                &:first-child {
                                    white-space: nowrap;
                                    /*wrap :换行*/
                                    /*文字自动变省略号步骤3 :溢出的文本- -律隐藏 */
                                    overflow: hidden;
                                    /*文字自动变省略号步骤4 :如果发生文本溢出,则使用省略号代替*/
                                    text-overflow: ellipsis;
                                }
                            }
                        }
                    }
                }
            }
        }

    }

    article {
        padding-left: 20px;
        .title {
            display: flex;
            justify-content: space-between;
            span {
                &:last-child {
                    color: #7F7F7F;
                    font-size: 12px;
                }
                &:first-child {
                    color: #000;
                    font-size: 14px;
                }
            }
        }
        .friends_box {
            display: flex;
            flex-flow: row wrap;
            text-align: center;
            &>div {
                width: 33%;
            }

            .friends {
                width: 70%;
                position: relative;
                margin: 10px auto;
                .anticon-close-circle {
                    position: absolute;
                    right: -8px;
                    top: -8px;
                    color: #CCCCCC;
                }

                .name {
                    white-space: nowrap;
                    /*wrap :换行*/
                    /*文字自动变省略号步骤3 :溢出的文本- -律隐藏 */
                    overflow: hidden;
                    /*文字自动变省略号步骤4 :如果发生文本溢出,则使用省略号代替*/
                    text-overflow: ellipsis;
                    margin-top: 8px;
                }
            }
        }

    }



}